
<div class="progress no-rounded progress-striped active" >
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%" id="avance">
  </div><!-- /.progress-bar .progress-bar-info -->
</div>

<form id="Form" method="post" action="<? //echo base_url().'index.php/factores/guardar_perfil'?>#">
	<input name="id_perfil" type="hidden" value="<?=0;?>"/>
		<div class="panel with-nav-tabs panel-info">
		  <div class="panel-heading">
			<div class="right-content">
				<button class="btn btn-info btn-rounded-lg to-collapse" data-toggle="collapse" data-target="#panel-collapse-2"><i class="fa fa-chevron-up"></i></button>
			</div>
			<ul class="nav nav-tabs">
				<?php  $p=sizeof($preguntas);
						$grupo=3;    ///indica la cantidad de preguntas que se van a agrupar
				for ($i=1; $i <=$p ; $i+=$grupo) { 
					$a = ($i==1) ? 'class="active"' : '' ;
					$tab="tab".$i;					
					echo '
						<li '.$a.'><a href="#'.$tab.'" data-toggle="tab">'.$i.'</a></li>';
				}	?> 
				<li><a href="#TabCapacitaciones" data-toggle="tab">Capacitaciones</a></li>
				<li><a href="#TabFinalizar" data-toggle="tab">Finalizar</a></li>
			</ul>
		  </div>		  
			<div id="panel-collapse-2" class="collapse in">
			  <div class="panel-body">
				<div class="tab-content">

	<?php 
		$i=1; //nesesario para los tab
		foreach ($preguntas as $k) { 
			$a = ($i==1) ? 'active in' : '' ;
				$primera=($i-1)%$grupo==0; //si es primera pregunta de nuevo grupo
				if ($primera) {   //para saber si  ira en un nuevo panel	
					$tab="tab".$i;

			?>  
			
		  <div class="tab-pane fade <?php echo $a; ?>" id="<?php echo $tab; ?>">
		  	<?php }?>
			<fieldset>

				<?php 	$fa=ucwords($k['factor']);
						if ($primera|| $preguntas[$i-2]['id_factor']!=$preguntas[$i-1]['id_factor']) {						
							echo  "<legend>".$fa."</legend>"; 
							echo '<input type="hidden" name="factor_u[]" value="'.$tab.'" class="factor_u"/>'; ///ubicacion de un factor en el panel 
							}

						?>
				<div class=" form-group">
					<div class="row">
						<div class="col-lg-8">
							<?php echo $k['pregunta'] ?>
						</div>
						<div class="col-lg-2">
							<label class="control-label">Calificación</label>
							<input type="hidden" value="<?php echo $k['ponderacion']; ?>" class="ponderacion"></input>
							<input type="hidden" value="<?php echo $fa; ?>" class="factor"></input>
							<select name="nota[]">
								<option value=""></option>

						 <?php 
						 	$s="";
						 	foreach($calificaciones as $val) { 
		                          $s.= '<option value="'.$val['id_calificacion'].'"';
		                          	if ($k['nota']==$val['id_calificacion']) { echo 'selected="selected"'; }
		                          $s.='>'.$val['calificacion'].'</option>';	                          
	                            } 
	                            echo $s;
	                        ?>
							</select>					
						</div>
					</div>
				</div><!-- /.form-group -->
				<div class=" form-group">
					<div ="row" >
						
						<div class="col-lg-7 justificacion_d" style="display:none">
							<label class="control-label">Justicación</label><br>							
							<textarea name="justificacion[]" style="width:100%;" class="justificacion_c"><?php echo $k['justificacion']; ?></textarea>
						</div>
						<div class="justificacion_a" style="height:80px"> </div>
					</div>					
				</div>

			</fieldset>

			<?php  if ($i%$grupo==0 || $i==$p) { ?>
			<div class="row">
				<ul class="pager wizard">			
					<li class="PrevStep"><button class="btn btn-default " type="button">Anterior</button></li>
				  	<li class="NextStep"><button class="btn btn-default " type="button">Siguiente</button></li>
				</ul>	
			</div>		  			
		      
		  </div><!-- end .tab$i  de preguntas -->
			  <?php 
			  		}//end if
			  $i++;	
		}	?>  
		<div class="tab-pane fade" id="TabCapacitaciones">
				<fieldset>					
				<legend> Capacitaciones</legend>
					
						<div class="row">
							<div class="form-group">
							 	<div class="col-lg-10">
							 			<label class="control-label">Seleccion de capacitaciones</label>							 		
									<div class="row">
										<div class="col-lg-10"> 
											<select data-placeholder="Seleccione..." class="form-control chosen-select" tabindex="2" id="capacitacion" >
												<option value="">Seleccione...</option>
												<?php 
													$s="";
												foreach ($capacitaciones as $v) {
									 				$s.= '<option value="'. $v['id_capacitacion'].'**'.$v['id_area'].'**'.$v['area'].'" >'.ucwords($v['nombre']).'</option>';
									 			 } 
									 			 	echo $s;
									 			?>												
											</select>
											<small data-bv-validator="notEmpty" class="help-block" style="display: none;">Debe seleccionar empleado</small>
										</div>
										<div class="col-lg-1"> 
											<button type="button" id="boton-local" class="btn btn-default"><i class="fa fa-plus-circle" ></i>Agregar</button>	
										</div>
									</div>	<!---row select y boton -->		

								</div>
							</div>
						</div><br>
								<div class="table-responsive row">
									<div class="col-lg-10"> 
						
									<table class="table table-th-block table-info" id="tabla-dinamica">
										<thead>
											<tr>												
												<th>Correlativo</th>
												<th>Capacitación</th>
												<th>Área</th>
												<th>Opciones</th>
											</tr>
										</thead>
										<tbody>
											
										</tbody>
									</table>
						
										</div><!-- /.col-lg-7 -->
								</div><!-- /.table-responsive -->					
				</fieldset>	
			<div class="row">
				<ul class="pager wizard">			
					<li class="PrevStep"><button class="btn btn-default " type="button">Anterior</button></li>
				  	<li class="NextStep"><button class="btn btn-default " type="button">Siguiente</button></li>
				</ul>	
			</div>		  						


					</div><!-- /.tab-pane fade capacitaciones-->
				<div class="tab-pane fade" id="TabFinalizar">
					<fieldset>					
						<legend> Finalizar</legend>
						<div class="table-responsive row">
							<div class="col-lg-10"> 
				
							<table class="table table-th-block table-info" id="tabla-dinamica2">
								<thead>
									<tr>												
										<th>N° de Pregunta</th>
										<th>Factor</th>
										<th >Calificación</th>
										<th >Puntos</th>
										<th>Observación</th>
									</tr>
								</thead>
								<tbody>
									
								</tbody>
							</table>
							<p> Nota: <span id="notaG"></span></p>
				
								</div><!-- /.col-lg-7 -->
						</div><!-- /.table-responsive -->
					</fieldset>	

						<div class="row">
							<ul class="pager wizard">			
								<li class="PrevStep"><button class="btn btn-default " type="button">Anterior</button></li>			
								<li><button class="btn btn-info " x`type="submit">Guardar</button></li>
							</ul>	
						</div>			
					</div><!-- /.tab-pane fade finalizar-->
				</div><!-- /.tab-content -->

			  </div><!-- /.panel-body -->

			    <div class="panel-footer">
					
				</div>

			</div><!-- /.collapse in -->
		</div>
	</form>


<script type="text/javascript">
/////////////////////////////////////////////Para control de capacitaciones
var capacitaciones=[];
$('#boton-local').click(function() {
	cap= $('#capacitacion').val();			
	det=cap.split('**');
	t1=getObjects(capacitaciones, 'id_capacitacion', det[0]);
	if (t1.length==0) {
		t2=getObjects(capacitaciones, 'id_area', det[1]);
		if (t2.length<3) {
			agregar(det);	
			mostrar_tabla();
		}else{
			$toast=toastr["info"]("El numero máximo de capacitaciones por áreas es 3, para agregar la seleccionada elimine una del área de "+det[2]);
		}
	}else{
		$toast=toastr["info"]("La capacitación seleccionada, ya ha sido agregada");
	}
	

})
function agregar(det) {
	sl= $("#capacitacion option:selected").text();
	capacitaciones.push({"id_capacitacion":det[0], "id_area":det[1],"area":det[2], "capacitacion_text":sl});
}

function mostrar_tabla () {
    			$('#tabla-dinamica tbody').empty();
    			var html="";    			
    			total=0
    			for (var i = 0; i < capacitaciones.length; i++) {
    				
    				input1='<input name="capacitaciones[]" value="'+capacitaciones[i].id_capacitacion+'" type="hidden"></input>';
    				

					fila='<tr>  '+
							'<td>'+(i+1)+input1+'</td>'+
							'<td>'+capacitaciones[i].capacitacion_text+'</td>'+
							'<td>'+capacitaciones[i].area+'</td>'+							
							'<td>	<button class="btn btn-default btn-xs" type="button"  onclick="eliminar_local('+i+')"><i class="fa fa-trash-o fa-2x"></i></button></td>'+
						'</tr>	';
				html+=fila;				
    			}

    			$('#tabla-dinamica tbody').html(html);

    	}

	function eliminar_local(ind) {
    		$('#eliminados').html($('#eliminados').html()+'<input name="eliminados[]" value="'+capacitaciones[ind].id_evaluacion+'" type="hidden" />');
    	
    	var temp = new Array();
    	var aux = 0;
		for (i=0;i<capacitaciones.length;i++) {
			if (i!=ind) {
					temp.push(capacitaciones[i]);
			}else{
				if(capacitaciones[i].asignado==1){ aux =capacitaciones[i].id_empleado;}
			}
		}

			capacitaciones=temp;
			mostrar_tabla();		

    	}
/////////////////////////////////////////////////////// Fin para control de capacitaciones


var result;
///////////////validaciones y barra de progreso
function verificar_contestadas () {
	tm=$("select[name='nota[]']").length;
	var i=0;	
	var html=""
		result=[];
			$("select[name='nota[]']").each(function( key, value ) {	   				
	   				
	   				var v =$(value).val()	   				
	   				if (v!=""){
	   					if(v<=2 && $($('.justificacion_c')[key]).val().length>20){
	   						i++;
	   						o='<li class="fa fa-check"> Ok </li><br>';
	   						html+=o;	   							   						
	   					}else{
	   						if(v>2) {
		   						i++;
		   					o='<li class="fa fa-check"> Ok </li><br>';
	   						}else{
	   							o='<li class="fa fa-warning"> Falta Justicación </li><br>';
	   						}
	   					}
	   					nota=v*0.2*$($('.ponderacion')[key]).val();

	   				}else{
	   					o='<li class="fa fa-warning"> No respondida </li>';	   				
	   					nota=0;
	   				}
	   				nota=Math.round(nota);
	   				f=$($('.factor')[key]).val();
	   				c= $(value).find(":selected").text();
	   				result.push({"factor":f, "nota_text":c,"nota":nota, "observacion":o});
	   				
	});

	mostrar_tabla2();
	p=Math.round((i/tm)*100);
	$('#avance').css("width",p+"%");
if (tm==i) {
	return true;
}else{
	return false;
}
}
function mostrar_tabla2 () {
	console.log("entro");
    			$('#tabla-dinamica2 tbody').empty();
    			var html="";    			
    			total=0
    			for (var i = 0; i < result.length; i++) {
    				total+=Number(result[i].nota);
					fila='<tr>  '+
							'<td>'+(i+1)+'</td>'+
							'<td>'+result[i].factor+'</td>'+
							'<td>'+result[i].nota_text+'</td>'+
							'<td>'+result[i].nota+'</td>'+							
							'<td>'+result[i].observacion+'</td>'+
						'</tr>	';
				html+=fila;				
    			}
    			html+=' <tr>  '+
							'<td> </td>'+
							'<td> </td>'+
							'<td> </td>'+
							'<td><strong>'+total+'</strong></td>'+							
							'<td></td>'+
						'</tr>';

    			$('#tabla-dinamica2 tbody').html(html);
    			var nott=Number((total/500)*10);
    			nott=nott.toFixed(2);
    			$('#notaG').html(nott);


    	}

	$('#Form').formValidation({
	        message: 'Valor no valido',
	        exclude: ':disabled',
            fields: {
                'nota[]': {
                    validators: {
                        notEmpty: {
                            message: 'Debe de seleccionar una calificación'
                        }
                    }
                },
                'justificacion[]': {
                    validators: {
                        notEmpty: {
                            message: 'Por favor justifique su respuesta'
                        },
                    	stringLength: {
	                        message: 'Debe ingresar un minimo de 20 caracteres',
	                        min: 20
	                	}
                    }
                }
            },
       }).on('success.form.fv', function(e) {
            // Prevent form submission
            e.preventDefault();
            	console.log("submit");
            



            /*/ Use Ajax to submit form data
            $.post($form.attr('action'), $form.serialize(), function(result) {
                // ... Process the result ...
            }, 'json');*/
        });

// Get the form instance
 $form = $('#Form');
 // Get the FormValidation instance
 bv = $form.data('formValidation');
 ////////////////////////////////////////////////////////////////////////////////Fin validaciones y barra de progreso
/////////////script para efectos

$("select[name='nota[]']").change(function(e) {
	var index = $( "select[name='nota[]']" ).index( this ); //index del select
	value=$(this).val()  //valor del elemento que cambio 
	if(value==1 || value==2){
		$($(".justificacion_d")[index]).fadeIn();
	}else{
		$($(".justificacion_d")[index]).fadeOut();
		$($(".justificacion_c")[index]).val("");
	}
});
$( window ).resize(function(e) {///esto es puro efecto de visualizacion para que no se mire como se agrega la justificacion  			
		if($( window ).width()<=1200){
			$('.justificacion_a').css('display','none')
		}else{
			$('.justificacion_a').css('display','block')
		}
});
$("select[name='nota[]'], .justificacion_c").on('change',function (e) {
		verificar_contestadas();

})



///fin script para efectos

</script>				
           

